<template>
  <div>
    <div class="mt20" style="float: left;">
      <div class="img-news-container">
        <slider :options="options">
          <slideritem v-for="(item,index) in newsList" :key="index">
            <a href="#" target="_blank">
              <img :src="item.imgUrl">
              <div class="news-title">
                {{item.title}}
              </div>
            </a>
          </slideritem>
          <div slot="loading">loading...</div>
        </slider>
      </div>
    </div>
  </div>
</template>

<script>
  import {slider, slideritem} from 'vue-concise-slider'

  export default {
    name: "HomeImageNews",
    data() {
      return {
        newsList: [
          {
            id: '1',
            title: '西安市公共交通总公司 公交驾驶员招聘公告',
            imgUrl: 'http://www.xagj.com.cn/upload/e89c109834d9426c966fe3f0703ef2e3.png'
          }, {
            id: '2',
            title: '西安市公共交通技工学校2019年秋季招生简章',
            imgUrl: 'http://www.xagj.com.cn/upload/6fe6ab20f6874ee5b9f97c6d72abfad4.jpg'
          }
        ],
        options: {
          currentPage: 0,//当前页码
          thresholdDistance: 100,//滑动判定距离
          thresholdTime: 300,//滑动判定时间
          autoplay: 5000,//自动滚动[ms]
          loop: true,//循环滚动
          // direction:'vertical',//方向设置，垂直滚动
          loopedSlides: 1,//无限滚动前后遍历数
          slidesToScroll: 1,//每次滑动项数
          timingFunction: 'ease', // 滑动方式
          speed: 800, // 滑动时间
          // renderPagination: (h, index) => {
          //   return h('div', {
          //     class: 'news-bullet-item'
          //   }, [index])
          // }
        }
      }
    },
    components: {
      slider,
      slideritem
    }
  }
</script>

<style>
  .img-news-container {
    width: 582px;
    height: 386px;
    overflow: hidden
  }

  .img-news-container img {
    width: 582px;
    height: 386px;
  }

  .img-news-container .news-title {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    font-size: 14px;
    width: 100%;
    text-align: left;
    background-color: rgba(0,0,0,0.6);
    padding: 5px 10px;
  }

  .img-news-container .slider-pagination{
    text-align: right;
  }

  .img-news-container .slider-pagination-bullet{
    background: #fff none repeat scroll 0 0 !important;
    opacity: .8 !important;
  }
  .img-news-container .slider-pagination-bullet-active{
    background: #007aff none repeat scroll 0 0 !important;
    opacity: 1 !important;
  }

</style>